import react from 'react'
import './index.css'
export default class LinkAnimation extends react.Component<LinkAnimationProps> {
    state: Readonly<LinkAnimationProps>;
    constructor(props: LinkAnimationProps) {
        super(props)
        // 参数参考文档
        this.state = {
            LinkIf: props.LinkIf,//条件判断
            children: props.children,//插槽
            type: props.type//类型
        }
    }
    render(): react.ReactNode {
        const { children, LinkIf, type } = this.props

        return (
            <div style={{ position: 'relative' }}>
                <div id='link-animation' className={LinkIf ? '' : type} style={{ opacity: LinkIf ? '1' : '0' }}>{children}</div>
            </div>
        )
    }
    componentDidMount() {
        const { type } = this.state
        // 因为是子元素是绝对定位父盒子没有高度所以这里要计算出子元素所有的高度总和
        const link = document.getElementById('link-animation')
        // 拿到所有子元素
        const linkLenght = link?.children.length as number
        // 初始化高度
        let height: number = 0
        // 初始化宽度
        let width: number = 0
        // 循环拿到每个子元素的高
        let arr = []
        for (let i = 0; i < linkLenght; i++) {
            height += link?.children[i].clientHeight as number
            arr.push(link?.children[i].clientWidth as number)
            width = Math.max(...arr)

        }

        // 判断动画类型
        switch (type) {
            case 'top':
                link?.style.setProperty('--toplength', `-${height}px`)
                break;
            case 'left':
                link?.style.setProperty('--toplength', `-${width}px`)
                break;
            case 'bottom':
                link?.style.setProperty('--toplength', `${height}px`)
                break;
            case 'right':
                link?.style.setProperty('--toplength', `${width}px`)
                break;
        }
        setTimeout(() => {

        }, 1000)


    }
    componentWillReceiveProps(){
        console.log(55);
        
    }
    // getDefaultProps(){
    //     console.log(55);
        
    // }
}